<template>
    <div class="user-info-temp">
        <van-form @submit="onSubmit" ref="userForm">
            <van-field required v-model="userInfo.nickname" name="参赛姓名" label="参赛姓名" placeholder="参赛姓名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field name="radio" label="性别">
                <template #input>
                    <van-radio-group v-model="userInfo.sex" direction="horizontal">
                        <van-radio :name="1">男</van-radio>
                        <van-radio :name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field required v-model="userInfo.mobile" type="number" name="手机号码" label="手机号码" placeholder="手机号码"
                :rules="[{ regMobild, message: '手机号码格式错误' }]" />
            <van-field required v-model="userInfo.email" name="邮箱" label="邮箱" placeholder="邮箱"
                :rules="[{ regEmile, message: '邮箱码格式错误' }]" />
            <van-field required v-model="userInfo.credential_id" name="身份证号码" label="身份证号码" placeholder="身份证号码"
                :rules="[{ regId, message: '身份证号码格式错误' }]" />
            <div style="margin: 0.6rem 0.3rem;">
                <van-button round block type="info" native-type="submit">提交信息</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { Toast, Form, Field, Button, RadioGroup, Radio } from 'vant';
import { RegObject } from "@/utils/utils";
export default {
    props: {
        callback: {
            type: Function,
            default: function () { return ''; }
        }
    },
    components: {
        [Field.name]: Field, [Form.name]: Form, [Button.name]: Button, [RadioGroup.name]: RadioGroup, [Radio.name]: Radio
    },
    data: function () {
        return {
            regMobild: RegObject().regMobild,
            regEmile: RegObject().regEmail,
            regId: RegObject().regId,
            userInfo: {
                credential_id: '',
                nickname: '',
                mobile: '',
                email: '',
                sex: 1
            }
        };
    },
    mounted() {
        let userInfo = null;
        try {
            userInfo = localStorage.getItem('YF_USER_INFOS');
            userInfo = userInfo && JSON.parse(userInfo) ? JSON.parse(userInfo) : null;
        } catch (e) { console.log('user', e); }
        if (userInfo) {
            this.userInfo.credential_id = userInfo.credential_id ? userInfo.credential_id : '';
            this.userInfo.nickname = userInfo.nickname ? userInfo.nickname : '';
            this.userInfo.mobile = userInfo.mobile ? userInfo.mobile : '';
            this.userInfo.email = userInfo.email ? userInfo.email : '';
            this.userInfo.sex = userInfo.sex ? userInfo.sex : 1;
        }
    },
    methods: {
        setStorageUser(data) {
            localStorage.setItem('YF_USER_INFOS', JSON.stringify(data));
            localStorage.setItem('YF_USER_INFOS_ID', data.id);
            localStorage.setItem('YF_USER_INFOS_OPENID', data.openid);
            this.$notify({ type: 'success', message: '提交成功' });
            setTimeout(()=>{
                this.$router.back();
            },1500)
        },
        onSubmit() {
            this.$refs['userForm'].validate().then(() => {
                Toast.loading({ message: "加载中...", forbidClick: true });
                this.$http
                    .post(this.$API.SET_USERINFO, this.userInfo)
                    .then((res) => {
                        Toast.clear();
                        if (res.code == 1) {
                            if (res.data && res.data.openid) {
                                this.setStorageUser(res.data);
                            } else {
                                localStorage.removeItem('YF_USER_INFOS');
                                localStorage.removeItem('YF_USER_INFOS_ID');
                                localStorage.removeItem('YF_USER_INFOS_OPENID');
                            }
                        } else {
                            this.$notify({ type: 'warning', message: res.msg });
                        }
                    });
            }).catch(() => {
                this.$notify({ type: 'warning', message: '有必填项未填' });
            });
        },
        getUrlParam(name) {   //name为要获取的参数名
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var rrr = decodeURIComponent(window.location.search);
            var r = rrr.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
    },
};
</script>

<style lang="less">
.user-info-temp {
    padding: 0.2rem;

    /* 插件部分样式重置 */
    .van-cell {
        padding: 0.3rem 0.3rem;
        font-size: 0.3rem;
        line-height: 0.48rem;
    }

    .van-cell__title {
        font-size: 0.3rem;
    }
}
</style>